<script>   
    $(function() {
        $("#submitbtn").button();
         $("#tool").dialog({title: 'Tools'
            ,position: ['right','top']
            ,autoOpen: true
            ,width: 420
            ,height: 120
            ,closeText: 'hide'
            ,close: function(event, ui) {
                $("#comment").dialog( "open" );
            }});
                
        $("#comment").dialog({title: 'Comment'
            ,position: ['left','bottom']
            ,autoOpen: true
            ,width: 300
            ,closeText: 'hide'
            ,close: function(event, ui) {
                $("#comment").dialog( "open" );
            }});                  
         $("#allcomment").dialog({title: 'All Comments'
            ,position: ['right',380]
            ,autoOpen: true
            ,width: 420   
            ,height: 200
            ,closeText: 'hide'
            ,close: function(event, ui) {
                $("#allcomment").dialog( "open" );
            }});  
    });
</script>

<style type="text/css"><!--
    #container { position: relative; }
    #imageView { border: 1px solid #000; position: relative; top: 1px; left: 1px;}
    #imageTemp { border: 1px solid #000; position: absolute; top: 1px; left: 1px; }   
    /*      #container { position: absolute; }
          #imageView { border: 1px solid #000;}
          #imageTemp { position: absolute; top: 1px; left: 1px; }*/
    -->
</style>
    
<div name="tool" id="tool">
    <table><tr><td style="border-right: 1px solid" width="60">
                <a href="javascript:save()">
                <?php echo html::image('assets/icon/floppy_disk_48.png') ?></a>
            </td>
            <td valign="middle">           
                <?php echo html::image('assets/icon/pencil_48.png') ?>                                
            </td>
            <td style="border-right: 1px solid" width="120"><select id="dtool">
                    <!--        <option value="line">Line</option>-->
                    <option value="rect">Rectangle</option>
                    <!--        <option value="pencil">Pencil</option>-->
                </select></td>
        </tr></table>
</div>
<?php
$img_width = $_GET['img_width'];
$img_height = $_GET['img_height'];
?>

<div style="width: 100%;height: 100%;background-color:#eeeeee;" align="center" class="ui-widget ui-corner-all">    
    <div id="container"  align="left">
        <canvas id="imageView" width="<?php echo $img_width ?>" height="<?php echo $img_height ?>">
            <p>Unfortunately, your browser is currently unsupported by our web 
                application.  We are sorry for the inconvenience. Please use one of the 
                supported browsers listed below, or draw the image you want using an 
                offline tool.</p>
            <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a 
                    href="http://www.mozilla.com">Firefox</a>, <a 
                    href="http://www.apple.com/safari">Safari</a>, and <a 
                    href="http://www.konqueror.org">Konqueror</a>.</p>
        </canvas>
        <br><br>
        <input id="btn1" name="btnButton" type="button" value="Undo" onClick="undo();"><br>

        
   <!--
    Start X <input id="txt1" name="txt1" type="text"><br>
    Start Y <input id="txt2" name="txt2" type="text"><br>
    End X <input id="txt3" name="txt3" type="text"><br>
    End Y <input id="txt4" name="txt4" type="text"><br>-->
        
        <div name="comment" id="comment" style="font-size: 12px">
            <table width="100%">
                <tr><td><textarea id="comments" name="comments" rows="4" cols="40"></textarea></td></tr>
                <tr><td><input type="submit" id="submitbtn" name="submit" value="Add" onClick="submit()" disabled="disabled"/></td></tr>
            </table>                                                               
        </div>
        
        <div name="allcomment" id="allcomment" style="font-size: 12px">
            <table width="100%" style="background-color: white;border:solid 1px black" cellspacing="0" cellpadding="3">
                <tbody align="left">
                    <tr style="background-color: teal;color: white;font-weight: bold">
                        <td width="10" align="center">No.</td>
                        <td width="335" align="center">ความเห็น</td>                       
                        <td width="68" align="center">ลบ</td>
                    </tr>
                </tbody>
                <tfoot align="left" id="commentDetail">
                    
                </tfoot>
            </table>              
        </div>
    </div>
</div>
        
<script type="text/javascript">var i_path = "<?= $img_path ?>";</script>
<script type="text/javascript">var c_id = "<?= $c_id ?>";</script>
<script type="text/javascript">var p_id = "<?= $p_id ?>";</script>
<script type="text/javascript">var ct_id = "<?= $ct_id ?>";</script> 
<script type="text/javascript">var comment_id = "<?= $comment_id ?>";</script> 
<script type="text/javascript" src="editct.js"></script>

